<template>
    <div style="margin:0 auto">
        <myheader></myheader>
        <section class="featured-block text-center">
        <div class="container">
            <div>
            <Breadcrumb :datas="datas"></Breadcrumb>
            </div>
        </div>
        </section>
        <div></div>
        <div>
            <table>
                <tr>
                    <td>名称</td>
                    <td>链接</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="name"></td>
                    <td><input type="text" v-model="src"></td>
                    <td><input type="text"v-model="img"></td>
                    <td><Button @click="add_carousel" color='blue'>添加</Button></td>
                </tr>
                <tr v-for="item,index in imgs">
                    <td>{{item.name}}</td>
                    <td>{{item.src}}</td>
                    <td><img :src="item.img" alt="图片加载失败" width="100" height="100"></td>
                    <Button class="Button" @click="find_carousel(index)" color='blue'>修改</Button>
                    <Button class="Button" @click="del_carousel(item.id)" color='red'>删除</Button>
                </tr>
            </table>
        </div>
        <div class="update">
                <p>更改：</p>
                <input type="hidden" name="id" v-model="id">
                <p>名称：<input type="text" v-model="name"></p>
                <p>链接：<input type="text" v-model="src"></p>
                <p>图片：<input type="text" v-model="img"></p>
                <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<Button color='green' @click="update_carousel">更改</Button></p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import myheader from './myheader.vue'
export default {
    data(){
        return{
            imgs:[],
            datas: [
            { title: "首页", route: { name: "index" } },
            { title: "用户中心", route: { name: "myprofile" } },
            { title: "管理员控制台", route: { name: "admin" } },
             ],
             id:'',
            name:'',
            src:'',
            img:'',
        }
    },
    // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
  mounted(){
      this.get_carousel()
  },
  methods:{
      //添加
      add_carousel(){
        var formdata=new FormData();
        formdata.append("name",this.name)
        formdata.append("src",this.src)
        formdata.append("img",this.img)
        this.axios({
            url:"http://127.0.0.1:8000/myapp/add_carousel/",
            method:'post',
            data:formdata,
        }).then(res=>{
            console.log(res.data)
            if(res.data.code==200){
                this.$Message(res.data.msg);
                setTimeout("window.location.reload()",6);
            }
        })
      },
      //删除
      del_carousel(id){
            axios.delete("http://127.0.0.1:8000/myapp/getcarousel/",{
            params: { 'id': id }
            }).then(res=>{
            console.log(res.data)
            if(res.data.code==200){
                this.$Message(res.data.msg);
                setTimeout("window.location.reload()",3);
            }
            })
      },
      //修改数据
    update_carousel(){
        var formdata=new FormData();
        formdata.append("name",this.name)
        formdata.append("src",this.src)
        formdata.append("img",this.img)
        formdata.append("id",this.id)
        this.axios({
            url:"http://127.0.0.1:8000/myapp/getcarousel/",
            method:'post',
            data:formdata,
        }).then(res=>{
            console.log(res.data)
            if(res.data.code==200){
                this.$Message(res.data.msg);
                setTimeout("window.location.reload()",6);
            }
        })
    },
      //定位轮播图
    find_carousel(index){
        console.log(this.imgs[index])
        this.name=this.imgs[index].name
        this.src=this.imgs[index].src
        this.img=this.imgs[index].img
        this.id=this.imgs[index].id

    },
    
    //获取轮播图接口
	get_carousel(){
		this.axios.get(' http://127.0.0.1:8000/myapp/getcarousel/').then(res=>{
			console.log(res.data)
			this.imgs=res.data
		})
	},
  }
  
}
</script>

<style>
table {
  margin: 0 auto;
  text-align: center;
  border-collapse:separate; 
  border-spacing:20px;
  
}
.Button{
    margin-top: 30px;
}
.update{
    margin-left: 700px;
}
</style>